<template>
  <div>
    <el-table :data="list" border style="text-align: center">
      <el-table-column prop="id" label="编号" width="60" />
      <el-table-column prop="name" label="资源名称" />
      <el-table-column prop="url" label="资源路径" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="createTime" label="添加时间">
        <template #default="{ row }">
          <span>{{ formateDate(row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="page">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total,sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </ElConfigProvider>
  </div>
</template>
<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { reactive, ref } from "vue";
import { resourceApi } from "./api";
import { formateDate } from "@/utils/index";
import useTable from "@/hooks/useTable";
const form = reactive({
  keyword: "",
});
// RoleListFn();
// 页面载入时请求数据并且导出来（点击的刷新，与响应式数据）
let { list, total, pageNum, pageSize, pageChangeHandle, pageSizeChangeHandle } =
  useTable(resourceApi, form);
</script>
<style lang="less" scoped>
:deep(.el-table) {
  font-size: 12px;
  .cell {
    text-align: center !important;
  }
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
